<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="128px"
      label-position="right"
      class="flex-form-3"
      size="mini"
      v-if="dialogType != 'detail'"
    >
      <el-form-item label="内承单位海关" prop="assumeId">
        <el-input
          v-model.trim="form.assumeId"
          placeholder="请输入内承单位海关"
        />
      </el-form-item>
      <el-form-item label="内承单位名称" prop="assumeName">
        <el-input
          v-model.trim="form.assumeName"
          placeholder="请输入内承单位名称"
        />
      </el-form-item>
      <el-form-item label="内承单位法人代表" prop="assumeRep">
        <el-input
          v-model.trim="form.assumeRep"
          placeholder="请输入内承单位法人代表"
        />
      </el-form-item>
      <el-form-item label="法人代表电话" prop="assumeRepPhone">
        <el-input
          v-model.trim="form.assumeRepPhone"
          placeholder="请输入法人代表电话"
        />
      </el-form-item>
      <el-form-item label="联系地址" prop="assumeAddr">
        <el-input v-model.trim="form.assumeAddr" placeholder="请输入联系地址" />
      </el-form-item>
      <el-form-item label="内承单位联系电话" prop="assumePhone">
        <el-input
          v-model.trim="form.assumePhone"
          placeholder="请输入内承单位联系电话"
        />
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" v-if="dialogType != 'detail'">
      <el-col :span="1.5">
        <el-button
          v-if="editIndex != -1"
          type="primary"
          plain
          icon="el-icon-edit"
          @click="handleSaveEdit"
          size="mini"
          >保存修改</el-button
        >
        <el-button
          v-else
          plain
          icon="el-icon-plus"
          type="success"
          @click="handleAddEdit('add')"
          size="mini"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <basic-table
      ref="tableList"
      :columns="columns"
      size="mini"
      :tableData="tableDataPage"
      :total="tableData.length"
      :pageSize="pageParams.pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :emptySmall="true"
    >
      <template #operate="scope" v-if="dialogType != 'detail'">
        <div class="option-menu">
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleAddEdit('edit', scope.row, scope.index)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleDelete(scope.index, tableData)"
          >
            删除
          </el-button>
        </div>
      </template>
    </basic-table>
  </div>
</template>

<script>
export default {
  name: "AbroadInfo",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    assumeCoInfosData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        id: null,
        eportSubId: null,
        coInfoId: null,
        assumeId: null,
        assumeName: null,
        assumeRep: null,
        assumeRepPhone: null,
        assumeAddr: null,
        assumePhone: null,
        operationType: null,
      },
      // 表单校验
      rules: {
        coInfoId: [
          { required: true, message: "关联企业信息ID不能为空", trigger: "blur" }
        ],
        assumeId: [
          { required: true, message: "内承单位海关不能为空", trigger: "blur" }
        ],
        assumeName: [
          { required: true, message: "内承单位名称不能为空", trigger: "blur" }
        ],
      },
      editIndex: -1,
      // 列表数据
      tableData: [],
      columns: [
        {
          prop: "assumeId",
          label: "内承单位海关",
          align: "center",
        },
        {
          prop: "assumeName",
          label: "内承单位名称",
          align: "center",
        },
        {
          prop: "assumeRep",
          label: "内承单位法人代表",
          align: "center",
        },
        {
          prop: "assumeRepPhone",
          label: "法人代表电话",
          align: "center",
        },
        {
          prop: "assumeAddr",
          label: "联系地址",
          align: "center",
        },
        {
          prop: "assumePhone",
          label: "内承单位联系电话",
          align: "center",
        },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 140,
          fixed: "right",
        },
      ],
      pageParams: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  computed: {
    tableDataPage() {
      let arr = this.tableData;
      const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize;
      const end = this.pageParams.pageNum * this.pageParams.pageSize;
      return arr.slice(start, end);
    },
  },
  watch: {
    assumeCoInfosData: {
      immediate: true,
      handler(val) {
        this.tableData = val;
      }
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageParams.pageSize = val.pageSize;
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val.currentPage;
    },
    initForm() {
      this.form = {
        id: null,
        eportSubId: null,
        coInfoId: null,
        assumeId: null,
        assumeName: null,
        assumeRep: null,
        assumeRepPhone: null,
        assumeAddr: null,
        assumePhone: null,
        operationType: null,
      };
    },
    // 新增/编辑
    handleAddEdit(type, row, index) {
      if (type === "add") {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.tableData.unshift({ ...this.form });
            this.$emit("receiveAssumeCoInfos", this.tableData);
            this.initForm();
            this.$refs["form"].resetFields();
          }
        });
      } else {
        this.form = { ...row };
        this.editIndex = index;
      }
    },
    // 保存修改
    handleSaveEdit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, { ...this.form });
          this.$emit("receiveAssumeCoInfos", this.tableData);
          this.initForm();
          this.$refs["form"].resetFields();
          this.editIndex = -1;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index, rows) {
      rows.splice(index, 1);
      this.$emit("receiveAssumeCoInfos", this.tableData);
      //计算当前页是否需要前移
      let totalPage = Math.ceil(
        this.tableData.length / this.pageParams.pageSize
      );
      if (this.pageParams.pageNum > 1 && this.pageParams.pageNum > totalPage) {
        this.pageParams.pageNum -= 1;
      }
    },
  },
};
</script>

<style type="text/css">
.el-form-item .el-select {
  width: 100%;
}
</style>